import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

/* 
  这些回调函数都是在 渲染完成之后执行的
  useEffect(回调函数1,[]) 这个回调函数1 类似于类组件的componentDidMount
  useEffect(回调函数2)    这个回调函数2 类似于类组件的componentDidMount和componentDidUpdate的结合体
  useEffect(回调函数3,[依赖项]) 当 依赖项  渲染完成之后 就会触发回调函数3

  这些回调函数可以返回一个 函数 ；返回的这个函数会在下一次回调函数执行之前执行或者组件销毁的时候执行

  Hooks  要求只能用在组件的最顶层作用域 不能用在for if 或者某些函数中
         要求只能用在函数式组件当中 不能用在类组件
  */
function Child() {

  useEffect(() => {
    console.log('child组件加载完了')
    return () => {
      console.log('child组件销毁了')
    }
  }, [])
  return <>
    <h2>Child</h2>
  </>
}

function App() {
  let [state, setState] = useState({
    count: 100,
    name: "珠峰"
  })

  // useEffect(() => {
  //   console.log("componentDidMount")
  // }, [])
  // useEffect(() => {
  //   console.log("componentDidMount+componentDidUpdate")
  // })
  let { count } = state
  useEffect(() => {
    console.log("count渲染完成了")
    return () => {
      // console.log("组件销毁了或者下一个回调函数要执行了")
    }
  }, [count])
  return <>
    <h2>{state.count}</h2>
    <input type="text" value={state.name} onChange={(e) => { setState({ ...state, name: e.target.value }) }} />
    <button onClick={() => setState({ ...state, count: state.count + 10 })}>+</button>
    {
      state.count < 150 ? <Child /> : ''
    }
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))